<template>
  <div id="sign-guide">
    <div class="content">
      <div class="slogan-box index-title" v-if="showSlogan === '0'">
        <div class="next-btn" @click="goInfo('4')"></div>
      </div>
     <!--<div class="info-box" v-if="!showSlogan">
        <div class="info-content">
          <h1>{{ info.title }}</h1>
          <p>{{ info.data }}</p>
        </div>
        <div class="enter-btn" @click="enterPlatform()"></div>
      </div>-->
      <div class="slogan-box index-forth" v-if="showSlogan === '4'">
        <div class="before-btn" @click="goInfo('0')"></div>
      <div class="enter-btn" @click="goInfo('5')"></div>
    </div>
      <!--<div class="slogan-box index-fifth" v-if="showSlogan === '5'">
        <div class="before-btn" @click="goInfo('4')"></div>
        <div class="enter-btn" @click="goInfo('1')"></div>
      </div>-->
      <sloganbox v-if="showSlogan === '5'" @toNext="gotoNext">
      </sloganbox>
     <div class="slogan-box index-first" v-if="showSlogan === '1'">
       <div class="before-btn" @click="goInfo('5')"></div>
       <div class="enter-btn" @click="goInfo('2')"></div>
     </div>
      <div class="slogan-box index-second" v-if="showSlogan === '2'">
        <div class="before-btn" @click="goInfo('1')"></div>
        <div class="enter-btn" @click="goInfo('3')"></div>
      </div>
      <div class="slogan-box index-third" v-if="showSlogan === '3'">
        <div class="before-btn" @click="goInfo('2')"></div>
        <div class="enter-btn" @click="enterPlatform()"></div>
      </div>
      <!--<audio id="bgMusic" preload="none">
        <source src="../../../static/images/audio/wuwei.mp3"  type="audio/mpeg">
      </audio>-->
    </div>
  </div>
</template>

<script>
import MYCONF from '../../myconf'
import {mapMutations} from 'vuex'
import eventBus from '../../util/event-bus'
import sloganbox from './sloganbox'
export default {
  name: 'SignGuide',

  data() {
    return {
      showSlogan: '0',
      info: {
        title: "凉州区道路运输基本情况",
        data: "凉州区有道路运输客运企业5家，旅游客运企业3家，城市公交企业1家，出租客运企业4家；" +
          "二级以上汽车客运站2个（一级1个、二级1个）；道路客运班线74条，其中：" +
          "省际道路客运班线6条、市际道路客运班线19条、县际班线7条、县内班线42条；" +
          "客运车辆2133辆（其中班线客车621辆，公交车332辆，其它车辆1180辆），" +
          "出租车1113辆；危险货物运输企业5家、危货运输车辆84辆；物流企业4家，" +
          "货运业户17910户，货运车辆18055辆；维修企业632家（一类2家、二类60家、三类570家）；" +
          "驾驶员培训学校34家（一级1家、二级13家、三级20家）；机动车综合性能检测站3个。"
      }
    }
  },

  methods: {
    ...mapMutations(['updateCurNav']),
    enterPlatform() {
      this.updateCurNav('2');
    },
    goInfo(value) {
      this.showSlogan = value;
    },
    gotoNext(data){
     this.goInfo(data.sloganValue)
    }
  },
  watch:{
    /*showSlogan:function () {
      if(this.showSlogan === '4'){
        var audio = document.getElementById("bgMusic");
        if(audio!=null){
          audio.currentTime = 0;
          audio.play();
        }
      }else{
        var audio = document.getElementById("bgMusic");
        if(audio!=null){
          audio.pause();
          audio.currentTime = 0;
        }
      }
    }*/
  },
  components:{
    sloganbox,
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";

  #sign-guide {
    width: 100%;
    height: $min-height;
    background: #1a3a66;
    position: relative;
    .content {
      .slogan-box {
        width: 100%;
        height: $min-height;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 200;
        &.index-title{
          background: url("../../../static/images/signViews/sign-guide-background_new.jpg") no-repeat center;
        }
        .next-btn {
          width: 40px;
          height: 44px;
          background: url("../../../static/images/signViews/next.png") no-repeat center;
          position: absolute;
          bottom: 38px;
          right: 36px;
          cursor: pointer;
        }
        &.index-first{
          position: relative;
          background: url("../../../static/images/signViews/index-first.png") no-repeat center;
          //background: url("../../../static/images/signViews/index-first1.png") no-repeat center;
        }
       &.index-second{
         position: relative;
          background: url("../../../static/images/signViews/index-second.png") no-repeat center;
        }
        &.index-third{
          position: relative;
          background: url("../../../static/images/signViews/index-third.png") no-repeat center;
        }
        &.index-forth{
          position: relative;
          background: url("../../../static/images/signViews/index-forth2.png") no-repeat center;
        }
        &.index-fifth{
          position: relative;
          background: url("../../../static/images/signViews/index-five.png") no-repeat center;
        }
      }
      .before-btn{
        width: 54px;
        height: 54px;
        background: url("../../../static/images/signViews/before.png") no-repeat center;
        position: absolute;
        bottom: 38px;
        left: 36px;
        cursor: pointer;
      }
      .enter-btn {
        width: 54px;
        height: 54px;
        background: url("../../../static/images/signViews/next.png") no-repeat center;
        position: absolute;
        bottom: 38px;
        right: 36px;
        cursor: pointer;
      }
    }
  }
</style>
